<script setup>
    import{ref,onMounted} from 'vue'
    import easyapi from '../api'
    import {ElMessageBox,ElMessage} from 'element-plus'

    // 定义绑定数据
    const allData = ref([]);
    // 当前页显示的数据 
    const tableData=ref([]);
    //控制新增信息窗口是否显示
    const addWinVisible=ref(false);
    //控制编辑信息窗口是否显示
    const editWinVisible=ref(false);
    //新增数据绑定对象
    const addObject=ref({});
    //编辑数据绑定对象
    const editObject=ref({});

    // //挂载页面时查询数据
    // onMounted(async function(){
    //     let result=await easyapi.get("/api/inventory/isshelf");
    //     tableData.value=result.data;
    // });
    // 分页查询
// 分页状态
const currentPage = ref(1);
const pageSize = ref(15); // 每页显示的数量
const total = ref(0); // 数据总数

// 计算当前页数据
const paginate = () => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    tableData.value = allData.value.slice(start, end);
};

// 挂载页面时查询数据
onMounted(async function() {
    try {
        const result = await easyapi.get("/api/inventory/isshelf");
        allData.value = result.data;
        total.value = allData.value.length;
        paginate();
    } catch (error) {
        ElMessage({
            type: 'error',
            message: '数据加载失败: ' + (error.response?.data?.message || '未知错误'),
        });
    }
});

// 处理分页变化
const handlePageChange = (newPage) => {
    currentPage.value = newPage;
    paginate();
};

    // 删除商品
    const del=function(index,row){
      ElMessageBox.confirm(
        "确定要删除该行数据吗?",
        "提示框",
        {
          confirmButtonText:"确认",
          cancelButtonText:"取消",
          type:'warning',
        }
      ).then(function(){
        //提交数据
        easyapi.del("/api/inventory/del",row.product_id)
        //刷新表格数据
        tableData.value.splice(index,1);
        //提示删除成功
        ElMessage({
          type:'success',
          message:'删除成功',
        })
      })
    }
    // 上架商品
    const isshelf = function(index,row){
        ElMessageBox.confirm(
        "确定要上架该商品吗?",
        "提示框",
        {
          confirmButtonText:"确认",
          cancelButtonText:"取消",
          type:'warning',
        }
      ).then(function(){
        //提交数据
        easyapi.del("/api/inventory/isshelf",row.product_id)
        //刷新表格数据
        tableData.value.splice(index,1);
        //提示删除成功
        ElMessage({
          type:'success',
          message:'上架成功',
        })
      })
    }

    //显示窗口
    const openAddWin=()=>{
      addObject.value={};
      addWinVisible.value=true;
    }
    const closeAddWin=()=>{
      addWinVisible.value=false;
    }
    // //显示窗口
    // const outAddWin=()=>{
    //   addObject.value={};
    //   addWinVisible.value=true;
    // }
    // const closeAddWin=()=>{
    //   addWinVisible.value=false;
    // }

</script>

<template>

<!-- start 显示商品信息的弹出框 -->
<el-table :data="tableData" style="width: 100%">
            <el-table-column label="序号" width="80" fixed>
        <template v-slot="scope">
            {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
            </template>
            </el-table-column>
  <el-table-column prop="product_id" label="商品编码" width="80" fixed/>
  <el-table-column prop="product_name" label="商品名称" width="100" fixed/>
  <el-table-column prop="location" label="库存位置" width="80" />
  <el-table-column prop="number" label="库存数量" width="80" />
  <el-table-column prop="util" label="单位" width="80" />
  <el-table-column prop="in_price" label="进货价" width="80" />
  <el-table-column prop="out_price" label="出货价" width="80" />
  <el-table-column prop="class_name" label="商品类别" width="100" />
  <el-table-column prop="last_date" label="最后调整时间" min-width="80"/>
    <el-table-column label="操作" fixed="right">
      <template #default="scope">
        <el-button type="primary" @click="isshelf(scope.$index,scope.row)">上架</el-button>
        <el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<!-- end 显示商品信息的弹出框 -->

    <!-- start 分页组件 -->
    <el-pagination
        background
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        @current-change="handlePageChange">
    </el-pagination>
    <!-- end 分页组件 -->
  <!-- start 入库信息的弹出框 -->


  <!-- end 新增商品信息的弹出框 -->

  <!-- start 出库信息的弹出框 -->
        <!--         editObject.value.product_id=row.product_id;
        editObject.value.product_name=row.product_name;
        editObject.value.location=row.location;
        editObject.value.number=row.number;
        editObject.value.util=row.tuil;
        editObject.value.in_price=row.in_price;
        editObject.value.out_price=row.out_price;
        editObject.value.class_id=row.class_id; -->


  <!-- end 出库信息的弹出框 -->

</template>

<style scoped>
.main-container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>
